/**
 * Created by zhuo on 2017/3/17.
 */

myChart = echarts.init(document.getElementById('main'));

option = {
    title: {
        text: '网站在线人数实时监控',
        subtext: '数据随机生成'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '00:00', '00:00', '00:00', '00:00', '00:00', '00:00']
    },
    yAxis: {
        type: 'value'
    },
    series: []
}

myChart.setOption(option);

var timeTask = setInterval("ajaxGetChart(successFun)", 3000);

function successFun(data) {
    changeOption2(data);
    myChart.setOption(option,true);
}

// function changeOption(data) {
//     var time = data.nowTime;
//     var value = data.theValue;
//
//     console.log(data + " time = " + time + " value = " + value);
//
//     xAxisUpdate(time);
//     dataUpdate(value);
// }

elementOfSeries = [
    {
        itemStyle: {normal:{color:'#CC0000'}},
        name: '人数',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    }, {
        itemStyle: {normal:{color:'#000CC'}},
        name: 'dim1',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    },
    {
        itemStyle: {normal:{color:'#CCFF33'}},
        name: 'dim2',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    },
    {
        itemStyle: {normal:{color:'#666633'}},
        name: 'dim3',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    },
    {
        itemStyle: {normal:{color:'#66FFFF'}},
        name: 'dim4',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    }, {
        itemStyle: {normal:{color:'#330000'}},
        name: 'dim5',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    }, {
        itemStyle: {normal:{color:'#99FFCC'}},
        name: 'dim6',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    }, {
        itemStyle: {normal:{color:'#CCFFCC'}},
        name: 'dim7',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    }, {
        itemStyle: {normal:{color:'#33FF99'}},
        name: 'dim8',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    }, {
        itemStyle: {normal:{color:'#333366'}},
        name: 'dim9',
        type: 'line',
        data: [10, 10, 10, 10, 10, 10, 10]
    }
]

function changeOption2(data) {
    console.log('data:'+data);
    var time = data[0].nowTime;
    xAxisUpdate(time);//更新时间
    $.each(data, function (key, value) {
        var theValue = value.theValue;//只是更新后的一个数字
        dataOfSeriesUpdate(key,theValue);
    })
    checkBoxesAndUpdateDimensions();
}

function dataOfSeriesUpdate(index,theValue) {
    elementOfSeries[index].data.shift();
    elementOfSeries[index].data.push(theValue);
}

function checkBoxesAndUpdateDimensions() {
    var checks = document.getElementsByName('show');
    var newArray = [];
    for(var i=0;i<checks.length;i++){
        if(checks[i].checked){
            newArray.push(elementOfSeries[i])
        }
    }
    option.series = newArray;
}

function dataUpdate(value) {
    option.series[0].data.shift();
    option.series[0].data.push(value);
}

function xAxisUpdate(time) {
    option.xAxis.data.shift();
    option.xAxis.data.push(time);
}

function ajaxGetChart(successFun) {
    $.ajax({
        url: '/getWebViews',
        type: 'POST', //GET
        async: true,    //或false,是否异步
        timeout: 5000,    //超时时间
        dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
        beforeSend: function (xhr) {
//                console.log(xhr)
//                console.log('发送前')
        },
        success: function (data) {
            successFun(data)
        },
        error: function (xhr, textStatus) {
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        },
        complete: function () {
//                console.log('结束')
        }
    })
}